<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link th:href="@{/css/css.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" tyle="text/css"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/jquery.min.1.8.2.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
    <script th:src="@{/js/common_js.js}" type="text/javascript"></script>
    <script th:src="@{/js/footer.js}" type="text/javascript"></script>
    <script th:src="@{/js/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>

    <!--[if IE 7]>
    <link rel="stylesheet" th:href="@{/css/font-awesome-ie7.min.css}">
    <![endif]-->
    <title>购物车</title>
    <script type="text/javascript">
        $(document).ready(function () {
            axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
            new Vue({
                el: "#cartsTable",
                data: {
                    cartsList: "",
                    totalPay: 0,
                }, mounted() {
                    // alert("ok")
                    axios
                        .get("/front/cart/getcarts", {
                            withCredentials: false,
                            headers: {jwt: localStorage.getItem("jwt")},
                        })
                        .then((r) => {
                            if ((r.data.code === 200)) {
                                console.log(r.data);
                                this.cartsList = r.data.data;
                                this.countTotalPay();
                            }
                        });
                }, methods: {
                    //统计当前数组内总额
                    countTotalPay() {
                        let carts = this.cartsList;
                        let money = 0;
                        if(carts.length<1){
                            alert('购物车已经为空!');
                            this.totalPay = money;
                            return;
                        }
                        for (let cart of carts) {
                            if (cart.ischoose === 'y') {
                                money = money + Number(cart.mount) * Number(cart.price).toFixed(2);
                            }
                        }
                        money = Number(money).toFixed(2);
                        this.totalPay = money;
                    },
                    submit() {
                        let cartsNow = this.cartsList;
                        let cartsBuy = [];
                        for (let cart of cartsNow) {
                            if (cart.ischoose === 'y') {
                                cartsBuy.push(cart);
                            }
                        }
                        if (cartsBuy.length < 1) {
                            alert("您尚未勾选任何商品");
                            return;
                        }

                        //提交购物车成功
                        localStorage.setItem('carts',JSON.stringify(cartsBuy));
                        location.href= "/front/order/list";
                    },
                    check(index) {
                        let cart = this.cartsList[index];
                        if (cart.ischoose === 'y') {
                            cart.ischoose = 'n';
                        } else {
                            cart.ischoose = 'y';
                        }
                        axios
                            .post("/front/cart/checkupdate", cart, {
                                withCredentials: false,
                                headers: {jwt: localStorage.getItem("jwt")},
                            }).then((r) => {
                            if ((r.data.code === 200)) {
                                this.countTotalPay();
                            }
                        });
                    },
                    delCart(index) {
                        let cart = this.cartsList[index];
                        axios
                            .get("/front/cart/delcart?id=" + cart.id, {
                                withCredentials: false,
                                headers: {jwt: localStorage.getItem("jwt")},
                            }).then((r) => {
                            if ((r.data.code === 200)) {
                                this.cartsList.splice(index, 1);
                                this.countTotalPay();
                            }
                        });
                    },
                    add(index) {
                        this.cartsList[index].mount = Number(this.cartsList[index].mount) + 1;
                        let cart = this.cartsList[index];
                        axios
                            .post("/front/cart/checkupdate", cart, {
                                withCredentials: false,
                                headers: {jwt: localStorage.getItem("jwt")},
                            }).then((r) => {
                            if ((r.data.code === 200)) {
                                this.countTotalPay();
                            }
                        });
                    },
                    //减少框显示 -1
                    del(index) {
                        if (this.cartsList[index].mount < 2) {
                            return;
                        }
                        ;
                        this.cartsList[index].mount = Number(this.cartsList[index].mount) - 1;
                        let cart = this.cartsList[index];
                        axios
                            .post("/front/cart/checkupdate", cart, {
                                withCredentials: false,
                                headers: {jwt: localStorage.getItem("jwt")},
                            }).then((r) => {
                            if ((r.data.code === 200)) {
                                this.countTotalPay();
                            }
                        });
                    }
                }
            })
            //全选
            $("#CheckedAll").click(function () {
                if (this.checked) {                 //如果当前点击的多选框被选中
                    $('input[type=checkbox][name=checkitems]').attr("checked", true);
                } else {
                    $('input[type=checkbox][name=checkitems]').attr("checked", false);
                }
            });
            $('input[type=checkbox][name=checkitems]').click(function () {
                var flag = true;
                $('input[type=checkbox][name=checkitems]').each(function () {
                    if (!this.checked) {
                        flag = false;
                    }
                });

                if (flag) {
                    $('#CheckedAll').attr('checked', true);
                } else {
                    $('#CheckedAll').attr('checked', false);
                }
            });
            //输出值
            $("#send").click(function () {
                if ($("input[type='checkbox'][name='checkitems']:checked").attr("checked")) {
                    var str = "你是否要删除选中的商品：\r\n";
                    $('input[type=checkbox][name=checkitems]:checked').each(function () {
                        str += $(this).val() + "\r\n";
                    })
                    alert(str);
                } else {
                    var str = "你为选中任何商品，请选择后在操作！";
                    alert(str);
                }

            });
        })
    </script>
</head>
<!--宽度1000的购物车样式-->
<body>
<div id="top">
    <div class="carts">
        <div class="Collection"><em></em><a href="#">收藏我们</a></div>
        <div class="hd_top_manu clearfix">
            <ul class="clearfix">
                <li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover" th:if="${user eq null}">欢迎光临本店！<a
                        th:href="@{/front/user/login}" class="red">[请登录]</a> 新用户<a th:href="@{/front/user/registered}"
                                                                                   class="red">[免费注册]</a></li>
                <li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover" th:if="${user ne null}">欢迎光临本店！<a
                        th:href="@{/ucenter/user/index}" class="red" th:text="${user.account}"></a> <a
                        th:href="@{/front/user/logout}" class="red">安全退出</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a th:href="@{/ucenter/order/list}">我的订单</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a th:href="@{/front/cart}">购物车(<b>0</b>)</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">联系我们</a></li>
                <li class="hd_menu_tit list_name" data-addclass="hd_menu_hover"><a href="#" class="hd_menu">客户服务</a>
                    <div class="hd_menu_list">
                        <ul>
                            <li><a href="#">常见问题</a></li>
                            <li><a href="#">在线退换货</a></li>
                            <li><a href="#">在线投诉</a></li>
                            <li><a href="#">配送范围</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="shop_cart">
    <div id="header">
        <div class="logo">
            <a th:href="@{/front/SPU/index}"><img th:src="@{/images/logo1.png}" alt="logo" height="139" width="247"/></a>

        </div>
        <div class="Search">
            <p><input name="" type="text" class="text"/><input name="" type="submit" value="" class="Search_btn"/></p>

        </div>
    </div>
    <!--提示购物步骤-->
    <div class="prompt_step">
        <img th:src="@{/images/cart_step_01.png}"/>
    </div>
    <!--购物车商品-->
    <div class="Shopping_list" id="cartsTable">
        <div class="shopping">
            <form method="post" action="">
                <table class="table_list">
                    <thead>
                    <tr class="title_name">
                        <th class="checkbox"></th>
                        <th class="name">商品名称</th>
                        <th class="bdj">本店价</th>
                        <th class="sl">数量</th>
                        <th class="xj">小计</th>
                        <th class="cz">操作</th>
                    </tr>
                    </thead>
                    <tr class="tr on" v-for="(item, index) in cartsList" :key="item.id">
                        <td class="checkbox"><label>
                            <input name="checkitems" type="checkbox" v-if="item.ischoose == 'y'" checked
                                   @click="check(index)"/>
                            <input name="checkitems" type="checkbox" v-if="item.ischoose == 'n'" @click="check(index)"/>
                        </label>
                        </td>
                        <td class="name">
                            <div class="img"><a href="#"><img :src="item.sku.spu.preview"/></a></div>
                            <div class="p_name"><a href="#">{{item.sku.spu.name}}</a></div>
                        </td>
                        <td class="bgj sp">{{item.price}}</td>
                        <td class="sl">
                            <div class="Numbers">
                                <a href="javascript:void(0);" @click="del(index);" class="jian">-</a>
                                <input id="number" name="number" type="text" :value="item.mount" class="number_text">
                                <a href="javascript:void(0);" @click="add(index);" class="jia">+</a>
                            </div>
                        </td>
                        <td class="xj">{{(item.price*item.mount).toFixed(2)}}</td>
                        <td class="cz">
                            <p><a href="javascript:void(0)" @click="delCart(index)">删除</a>
                            <P>
                            <p><a href="javascript:void(0)">收藏该商品</a></p>
                        </td>
                    </tr>
                </table>
                <div class="sp_Operation">
                    <div class="select-all">
                        <div class="cart-checkbox"><input type="checkbox" id="CheckedAll" name="toggle-checkboxes"
                                                          class="jdcheckbox" clstag="clickcart">全选
                        </div>
                        <div class="operation"><a href="javascript:void(0);" id="send">删除选中的商品</a></div>
                    </div>

                    <!--结算-->
                    <div class="toolbar_right">
                        <div class="p_Total">
                            <span class="text">商品总价：</span><span class="price sumPrice">{{totalPay}}</span>
                        </div>
                        <div class="Discount"><span class="text"></span><span class="price"></span></div>
                        <div class="btn">
                            <a class="cartsubmit" href="javascript:void(0)" @click="submit"></a>
                            <a class="continueFind" href="/front/cart/homepage"></a>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <!--底部样式-->
    <div class="footer help-box  clearfix">
        <div class="right_footer clearfix">
            <dl>
                <dt><em class="icon_img"></em>购物指南</dt>
                <dd><a href="#">怎样购物</a></dd>
                <dd><a href="#">积分政策</a></dd>
                <dd><a href="#">会员优惠</a></dd>
                <dd><a href="#">订单状态</a></dd>
                <dd><a href="#">产品信息</a></dd>
                <dd><a href="#">怎样购物</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>配送方式</dt>
                <dd><a href="#">快递资费及送达时间</a></dd>
                <dd><a href="#">快递覆盖地区查询</a></dd>
                <dd><a href="#">验货与签收</a></dd>
                <dd><a href="#">订单状态</a></dd>
                <dd><a href="#">产品信息</a></dd>
                <dd><a href="#">怎样购物</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>配送方式</dt>
                <dd><a href="#">货到付款</a></dd>
                <dd><a href="#">支付宝</a></dd>
                <dd><a href="#">财付通</a></dd>
                <dd><a href="#">网银支付</a></dd>
                <dd><a href="#">银联支付</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>售后服务</dt>
                <dd><a href="#">退换货原则</a></dd>
                <dd><a href="#">退换货要求与运费规则</a></dd>
                <dd><a href="#">退换货流程</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>关于我们</dt>
                <dd><a href="#">关于我们</a></dd>
                <dd><a href="#">友情链接</a></dd>
                <dd><a href="#">媒体报道</a></dd>
                <dd><a href="#">新闻动态</a></dd>
                <dd><a href="#">企业文化</a></dd>

            </dl>
        </div>
        <div class="Copyright">
            <p><a href="#">关于我们</a> | <a href="#">隐私申明</a> | <a href="#">成为供应商</a> | <a href="#">茶叶</a> | <a
                    href="#">博客</a> |<a href="#">友情链接</a> | <a href="#">网站地图</a></p>
            <p>Copyright 2010 - 2015 巴山雀舌 四川巴山雀舌茗茶实业有限公司 zuipin.cn All Rights Reserved </p>
            <p>川ICP备10200063号-1</p>
            <a href="#" class="return_img"></a>
        </div>
    </div>

    <!--结束-->
</div>
</body>
</html>
